﻿<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,local storage">
<title>Records of Your Activities by means of Local Storage</title>
<STYLE type="text/css">
 	body {
		background-color: #CCCCFF;
	}
	h1 {
		font-size:15px;
		line-height: 70%;
	}
	h3 {
		font-size:12px;
	}
	#ctrlpanel {
		width: 80%;
		background-color: #CCAAFF;
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		border: 9px #555577 solid;
		border-style: ridge groove inset;
	}
	#command {
		padding : 5px;
	}
	#histList {
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		border: 2px #222222 solid;
		background-color: #AACCEE;
	}

	.listDetail {
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		border: 1px #222222 solid;
	}
	.listItem {
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		border: 1px #222222 solid;
	}
	#histActDate {
		margin-left:auto;
		margin-right:auto;
		text-align:left;
	}
	#histActInst {
		margin-left:auto;
		margin-right:auto;
		text-align:left;
	}
	.submitButton {
		background-color: #ffff00;
		border: 2px solid #444422;
		color: #000033;
	}
	.argButton {
		background-color: #CCCCFF;
		border: 2px solid #333311;
		color: #000033;
	}
	.listDate {
		background-color: #CCCCFF;
		border: 2px solid #333311;
		color: #000033;
	}
	.listAct {
		background-color: #CCCCFF;
		border: 2px solid #333311;
		color: #000033;
	}
	.testButton {
		background-color: #ff00ff;
		border: 2px solid #442244;
		color: #000033;
	}
	.submitButton {
		background-color: #ffff00;
		border: 2px solid #444422;
		color: #000033;
	}
	.argButton {
		background-color: #CCCCFF;
		border: 2px solid #333311;
		color: #000033;
	}
		
</STYLE>
<script>
	var	level = 1;
	function setNaviPath(isOut) {
		var mainWindow = window.parent;
		if (isOut == false) {
			mainWindow.document.getElementById('path' + level + "lnk").innerHTML = "";
//			mainWindow.document.getElementById('path' + level + "lnk").href = "";
			mainWindow.document.getElementById('path' + level + "txt").innerHTML = "&gt; History ";
			for (var i = 2; i < 5; i++) {
				mainWindow.document.getElementById('path' + i + "lnk").innerHTML = "";
//				mainWindow.document.getElementById('path' + i + "lnk").href = "";
				mainWindow.document.getElementById('path' + i + "txt").innerHTML = "";
			}
		} 
//		else {
//			var tmp = mainWindow.document.getElementById('path' + level + "lnk");
//			tmp.innerHTML = "&gt; Car Mileage ";
//			tmp.href = "javascript:void(0)";
//			mainWindow.document.getElementById('path' + level + "lnk").innerHTML = "> Car Mileage ";
//			mainWindow.document.getElementById('path' + level + "lnk").href = "./graph.html";
//			mainWindow.document.getElementById('path' + level + "txt").innerHTML = "";
//			mainWindow.document.getElementById('path' + (level + 1) + "lnk").innerHTML = "";
//			mainWindow.document.getElementById('path' + (level + 1) + "txt").innerHTML = "&gt; Data ";
//		}
	}
</script>
<script>
function makeList(){
  // եϥꥢɲå
	var	col = 3;
	var	aNode;
	var	bNode;
	var	tNode;
	var	pCount = 0;
	var	pKey;
	var 	pItem;
	var	wSrt;
	
	wSrt = new Array();	
	var	pNode = document.getElementById("histList");
	for ( var i = 0; i < localStorage.length; i++){
		pKey = localStorage.key(i);
		if  (pKey.substr(0,5) == "tdssg") {
			wSrt[pCount] = new Array(2);
			wSrt[pCount][0] = pKey.substr(5);
			wSrt[pCount][1] = localStorage.getItem(pKey);
			pCount++;
		}
	}
	wSrt.sort();
	for ( var i = 0; i < pCount; i++){
		pItem = localStorage.getItem(pKey);
		var cNode = document.createElement("TR");
		cNode.setAttribute("class","listDetail");
		for (var j = 0; j < col; j++) {
			aNode=document.createElement("TD");
			aNode.setAttribute("class","listItem");
			if (j == 0) {
				tNode=document.createElement("INPUT");
				tNode.setAttribute("type","checkbox");
				tNode.setAttribute("name","selBox");
			} else if (j == 1) {
				tNode=document.createTextNode(wSrt[i][0]);
			} else if (j == 2) {
				tNode=document.createTextNode(wSrt[i][1]);
			}
			aNode.appendChild(tNode);
			cNode.appendChild(aNode);
		}
		pNode.appendChild(cNode);
	}
	document.getElementById("citeCount").innerHTML = pCount;
	document.getElementById("totalCount").innerHTML = localStorage.length;
}


function	deleteRec() {
	var	pKey;
	var 	pItem;
	var	col = 3;
	var	temp;
	var	pNode;

	pNode = document.getElementById("histList");
	for (var i = 1; i < pNode.rows.length; i++) {
		temp = pNode.rows[i].cells[0];
		if (pNode.rows[i].cells[0].childNodes[0].checked == true) {
			pKey = "tdssg" + pNode.rows[i].cells[1].innerHTML;
			localStorage.removeItem(pKey);
		}
	}
	for (var i = pNode.rows.length -1; i > 0; i--) {
		temp = pNode.rows[i].cells[0];
		if (temp.childNodes[0].checked == true) {
			pNode.deleteRow(i);
		}
	}
	pKey = "tdssg" + Date();
	pItem = "Click Delete Button on this page";
	localStorage.setItem(pKey, pItem);
	var cNode = document.createElement("TR");
	cNode.setAttribute("class","listDetail");
	for (var j = 0; j < col; j++) {
		aNode=document.createElement("TD");
		aNode.setAttribute("class","listItem");
		if (j == 0) {
			tNode=document.createElement("INPUT");
			tNode.setAttribute("type","checkbox");
			tNode.setAttribute("name","selBox");
		} else if (j == 1) {
			tNode=document.createTextNode(pKey.substr(5));
		} else if (j == 2) {
			tNode=document.createTextNode(pItem);
		}
		aNode.appendChild(tNode);
		cNode.appendChild(aNode);
	}
	pNode.appendChild(cNode);
}

function	selectAllRec() {
var temp
//	var tmp = document.getElementsByName("selBox");
//	for (var i = 0; i < tmp.length; i ++) {
	for (var i = 0; i < document.getElementsByName("selBox").length; i ++) {
		document.getElementsByName("selBox").item(i).checked = true;
//	document.getElementsByName("selBox").item(i).checked = true;
	}
}


function	insertRec() {
	var	col = 3;
	var	pNode = document.getElementById("histList");
	var	pKey = "tdssg" + Date();
	var	pItem = "Click Test Button on this page";
	localStorage.setItem(pKey, pItem);
	var cNode = document.createElement("TR");
	cNode.setAttribute("class","listDetail");
	for (var j = 0; j < col; j++) {
		aNode=document.createElement("TD");
		aNode.setAttribute("class","listItem");
		if (j == 0) {
			tNode=document.createElement("INPUT");
			tNode.setAttribute("type","checkbox");
			tNode.setAttribute("name","selBox");
		} else if (j == 1) {
			tNode=document.createTextNode(pKey.substr(5));
		} else if (j == 2) {
			tNode=document.createTextNode(pItem);
		}
		aNode.appendChild(tNode);
		cNode.appendChild(aNode);
	}
	pNode.appendChild(cNode);
}


</script>
</head>
<body onload="localStorage.setItem('tdssg' + Date(), 'Open Records page');setNaviPath(false);makeList();"
	onunload="localStorage.setItem('tdssg' + Date(), 'Exit from this Records page');">
<h1>Records of Your Activities by means of Local Storage</h1>
<h3>Please browse with HTML 5 browser</h3>
<div id="container">

<div id="ctrlpanel">
		<table id ="command">
			<tr>
			<td>
			</td>
			<td>
			<strong>--Information--&#xA0;&#xA0;&#xA0;</strong><br />
			<span>Local Storage preserves:<br /></span>
			<span id="citeCount">nnn</span>&#xA0;pairs for this cite,<br />
			<span id="totalCount">nnn</span>&#xA0;pairs in total.<br />
			</td>
			</tr>
		</table>
</div>
<input type="button" class="testButton" value="testInsert" onClick="insertRec();">
<input type="button" class="submitButton" value="Delete" onClick="deleteRec();">
<br />
<table id="histList">
	<tr class="listDetail" width="100%">
		<td class="listItem" id="histSelect" width="7%"><input type="button" class="argButton" value="SelectAll" onClick="selectAllRec();"></td>
		<td class="listItem" id="histActDate" width="37%">DateTime</td>
		<td class="listItem" id="histActInst" width="55%">Action</td>
	</tr>
</table>
		
</div>

</body>

</html>
